<template>
    <el-row class="main-cont padd20">
        <el-row>
            <el-col class="title box box-pack-between">
                <el-form ref="lineForm" :model="lineForm" class="reset-form" :label-width="labelWidth">
                    <el-col class="box box-pack-start">
                        <el-form-item label="学年学期">
                            <el-select v-model="xnxq" placeholder="选择学期" @change="selectXnxq" class="text">
                                <el-option v-for="(item,index) in xnxqList" :key="index" :label="`${item.xn}${item.xq}`"
                                    :value="`${item.xn}${item.xq}`"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学级">
                            <el-select v-model="xj" placeholder="请选择" @change="selectXj" class="text">
                                <el-option label="全部学级" value="">全部学级</el-option>
                                <el-option :label="item+`级`" :value="item" v-for="(item,i) in xjList" :key="i">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专业">
                            <el-select v-model="zy" filterable placeholder="请选择" @change="selectZy" class="text">
                                <el-option label="全部专业" value="">全部专业</el-option>
                                <el-option :label="item.zymc" :value="item.zydm" v-for="(item,i) in zyList" :key="i">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div class="btn">
                            <el-button class="reset-comfirm-btn" @click="setClassTr(maxRole)">+设置托管教师</el-button>
                            <el-button class="reset-comfirm-btn ml20" @click="handleSetTeacher()"
                                v-if="maxRole == 'team'">设置未绑定教师</el-button>
                        </div>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>

        <el-row class="mt20">
            <el-col class="box box-tb content posa padd20">
                <el-col v-if="bjList.length !=0" class="bjlist">
                    <div class="list box box-pack-between mb10" v-for="(item,i) in bjList" :key="i">
                        <div class="left box box-align-center box-pack-center" style="display: inline-block;">
                            <i class="el-icon-success" v-if="item.trName != null"></i>
                            <span style="font-size: 12px;">{{item.xj+'级'+item.zymc}}</span><br>
                            <span class="class-name">{{item.bjmc}}</span>
                        </div>
                        <div class="right box box-align-center box-pack-center padd10" v-if="item.trName != null">
                            <div class="tr-name" :title="item.trName">{{item.trName}}</div>
                            <i class="el-icon-edit-outline" @click="clickAdd(item.id)" style="cursor: pointer;"
                                title="更改带班教师"></i>
                        </div>
                        <div class="right none cp" @click="clickAdd(item.id)" v-if="item.trName == null">
                            <i class="el-icon-plus" style="cursor: pointer;" title="设置带班教师"></i>
                        </div>
                    </div>
                </el-col>
                <el-row class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-row>
            </el-col>
        </el-row>
        <diaLogs :dialogVisible="dialogVisible" @clickClose="clickClose()" @updateData="schoolClassList()"
            :title="title" ref="child" :classid="classid" :xnxq="xnxq">
        </diaLogs>
        <setTeach :dialogVisible="dialogVisible2" @clickClose="clickClose2()" @updateData="schoolClassList()"
            title="选择托管老师" ref="child2" :classid="classid" :xnxq="xnxq">
        </setTeach>
        <!-- 设置未绑定教师 -->
        <el-dialog title="设置未绑定教师" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form" label-width="120px" :rules="rules">
                <el-form-item label="学校" prop="schooldId">
                    <el-select v-model="form.schooldId" filterable placeholder="选择学校" remote
                        :remote-method="remoteMethod" :loading="loading" @change="selectSchool" class="text"
                        v-load-more="loadMore">
                        <el-option v-for="(item,index) in pages.list" :key="index" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学年学期" prop="xnxq">
                    <el-select v-model="form.xnxq" placeholder="选择学期" class="text">
                        <el-option v-for="(item,index) in newXn" :key="index" :label="`${item.xn}${item.xq}`"
                            :value="`${item.xn}${item.xq}`"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学级">
                    <el-select v-model="form.xj" placeholder="请选择" class="text">
                        <el-option label="全部学级" value="">全部学级</el-option>
                        <el-option :label="item+`级`" :value="item" v-for="(item,i) in newXj" :key="i">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-select v-model="form.zy" filterable placeholder="请选择" class="text">
                        <el-option label="全部专业" value="">全部专业</el-option>
                        <el-option :label="item.zymc" :value="item.zydm" v-for="(item,i) in newZy" :key="i">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师" prop="trId">
                    <el-select v-model="form.trId" filterable placeholder="请选择" @change="selectTeacher"
                        v-load-more="loadMoreTr" class="text">
                        <el-option :label="item.name" :value="item.id" v-for="(item,i) in page.list" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                <!-- <el-button @click="resetForm('form')">重 置</el-button> -->
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
    import minxins from "@/utils/minxins";
    import diaLogs from './components/addTeacher.vue';
    import setTeach from './components/setTeacher.vue';
    export default {
        components: {
            diaLogs,
            setTeach
        },
        mixins: [minxins],
        data() {
            return {
                xnxqList: [],
                xjList: [],
                zyList: [],
                bjList: [],
                xnxq: '',
                xj: '',
                zy: '',
                loginInfo: this.$store.state.loginInfo,
                schoolid: this.$store.state.schoolId,
                maxRole: this.$store.state.maxRole,
                title: '',
                dialogVisible: false,
                dialogVisible2: false,
                classid: 0,
                labelWidth: "80px",
                lineForm: {

                },
                dialogFormVisible: false,
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: [],
                    pages: 1
                },
                loading: false
            };
        },
        created() {
            this.jyzXnxqlist()
        },
        mounted() {},
        methods: {
            // //查询服务团队学校列表
            // teamxxlb(pageNum) {
            //     var params = {
            //         searchText: '',
            //         pageNum: pageNum,
            //         schoolid: this.schoolid,
            //         pageSize: 12
            //     };
            //     this.$ajax.post('/yschool/teampagelist', params).then(res => {
            //         if (res.code == '0') {
            //             this.pages = res.list;
            //         } else {
            //             this.$message.error('请求失败！');
            //         }
            //     })
            // },

            handleSetTeacher() {
                this.dialogFormVisible = true
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = {
                            trName: this.form.trName,
                            trId: this.form.trId,
                            schoolid: this.form.schooldId,
                            xj: this.form.xj,
                            xn: this.form.xnxq.substring(0, 9),
                            xq: this.form.xnxq.substring(9, 12),
                            zydm: this.form.zy
                        };
                        this.$ajax.post('/dclass/setSchoolClassTeacher', params).then(res => {
                            if (res.code == '0') {
                                this.$message.success("添加成功")
                                this.dialogFormVisible = false
                                this.schoolClassList()
                            } else {
                                this.$message.error('请求失败！');
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //将没有带班老师的班级，统一设置带班老师
            setClassTr(e) {
                console.log(e);
                this.$refs.child2.form = {};
                this.dialogVisible2 = true;
                if (e == `team`) {
                    this.$refs.child2.schoolTrList();
                } else {
                    this.$refs.child2.getTeacherData();
                }

            },
            jyzXnxqlist() {
                this.$api.jyz.jyzXnxqlist({
                    schoolid: this.schoolid
                }).then(res => {
                    // console.log(res);
                    if (res.code == '0') {
                        this.xnxqList = res.list;
                        // this.newXn = this.deepClone(res.list)
                        res.list.map(resp => {
                            if (resp.isCur == 1) {
                                this.xnxq = resp.xn + resp.xq;
                            }
                        })
                        this.title = this.xnxq + '带班教师';
                        this.getXjListData();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            getXjListData() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.jyz.getXj(params).then(res => {
                    if (res.code == '0') {
                        this.xjList = res.list;
                        // this.newXj = this.deepClone(res.list)
                        this.xj = res.list[0];
                        this.getZyList();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            getZyList() {
                let params = {
                    schoolid: this.schoolid
                };
                console.log(this.schoolid)
                this.$api.jyz.getZyList(params).then(res => {
                    if (res.code == '0') {
                        this.zyList = res.list;
                        // this.newZy = this.deepClone(res.list)
                        this.zy = res.list[0].zydm;
                        this.schoolClassList();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            schoolClassList() {
                console.log(111);
                let params = {
                    schoolid: this.schoolid,
                    zydm: this.zy,
                    xn: this.xnxq.substring(0, 9),
                    xq: this.xnxq.substring(9, 12),
                    xj: this.xj
                };
                this.$api.jyz.schoolClassList(params).then(res => {
                    console.log(res)
                    if (res.code == '0') {
                        this.bjList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            selectXnxq(e) {
                this.xnxq = e;
                this.schoolClassList();
            },
            selectXj(e) {
                this.xj = e;
                this.schoolClassList();
            },
            selectZy(e) {
                this.zy = e;
                this.schoolClassList();
            },
            clickAdd(id) {
                this.classid = id;
                this.$refs.child.form = {};
                this.$refs.child.schoolTrList();
                this.dialogVisible = true;
            },
            clickClose() {
                this.dialogVisible = false
            },
            clickClose2() {
                this.dialogVisible2 = false
            }
        }
    }
</script>

<style scoped lang="scss">
    // @media (max-width:1500px) {
    //     .list {
    //         width: 290px !important;
    //     }
    // }

    .main-cont {
        position: relative;
        height: 100%;
        background-color: #fff;
        overflow-x: auto;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .content {
        flex-wrap: wrap;
    }

    .posa {
        max-height: 600px;
        height: 550px;
    }

    .list {
        width: 376px;
        height: 80px;
        // background: #F8F9FC;
        border: 1px solid #D2D5F1;
        border-radius: 10px;
        margin: 0 5px 50px 0;
    }

    .left {
        padding: 0 20px;
        box-sizing: border-box;
        width: 215px;
        height: 100%;
        background-color: #fff;
        text-align: center;
        // font-size: 18px;
        font-weight: 600;
        border-radius: 10px 0 0 10px;
    }

    .class-name {
        margin-left: 5px;
        width: 200px;
        text-align: left;
        // overflow: hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
    }

    .right {
        width: 195px;
        border-radius: 0px 9px 9px 0px;
        // height: 58px;
        line-height: 80px;
        background: #F3F4FB;
        font-size: 18px;
        color: #5b6988;

        &.none {
            display: inline-block;
            min-width: 118px;
            height: 100%;
            line-height: 80px;
            border-radius: 0px 9px 9px 0px;
            color: #8e92ca;
            font-size: 16px;
        }

        span {}
    }


    .right :hover {
        color: #675ee1;
    }


    .el-icon-success {
        color: #07c207;
    }

    .myicon-tick-checked {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #07c207;
        color: #fff;
        margin-right: 12px;
    }

    .myicon-tick-checked:before,
    .myicon-tick-checked:after,
    .myicon-tick-uncheck:before,
    .myicon-tick-uncheck:after {
        content: '';
        pointer-events: none;
        position: absolute;
        color: white;
        border: 1px solid;
        background-color: white;
    }

    .myicon-tick-checked:before,
    .myicon-tick-uncheck:before {
        width: 1px;
        height: 1px;
        left: 25%;
        top: 50%;
        transform: skew(0deg, 50deg);
    }

    .myicon-tick-checked:after,
    .myicon-tick-uncheck:after {
        width: 3px;
        height: 1px;
        left: 45%;
        top: 42%;
        transform: skew(0deg, -50deg);
    }

    .bjlist {
        display: flex;
        flex-wrap: wrap;
    }

    .tr-name {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
